<template>
  <el-container>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" style=" text-align: left;">
    <el-form-item label="标题" prop="title" >
      <el-input v-model="ruleForm.title"></el-input>
    </el-form-item>

      <el-form-item label="类别" prop="category_id">
        <el-select v-model="ruleForm.category_id"  placeholder="请选择类别">
<!--          <el-option v-for="category in allCategoryList" :key="category.id" :value="category.id" :label="category.name" ></el-option>-->
          <el-option key="1" value="1" label="了解专升本"></el-option>
          <el-option key="2" value="2" label="升本大纲"></el-option>
          <el-option key="3" value="3" label="经验分享"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="介绍" prop="introduction" >
        <el-input  type="textarea" v-model="ruleForm.introduction"></el-input>
      </el-form-item>



      <el-form-item label="上传图片">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="/file/upload"
          name = "fileData"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.cover_url" :src="ruleForm.cover_url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="文章内容" prop="content">


        <vue-ueditor-wrap ref="editor" v-model="ruleForm.content"></vue-ueditor-wrap>

      </el-form-item>

      <el-form-item label="是否发布" prop="state">
        <el-radio-group v-model="ruleForm.state">
          <el-radio :label=1>直接发布</el-radio>
          <el-radio :label=2>不直接发布</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>

    <el-footer class = "footer">
      <el-button >取 消</el-button>
      <el-button type="primary" @click = "save('ruleForm')"> 确 定</el-button>
    </el-footer>
  </el-container>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'


  export default{
    name: 'hello',
    components: {VueUeditorWrap},
    data(){
      return {
        ruleForm: {
          id:'',
          cover_url:'',
          title: '',
          category_id:'',
          state:1,
          introduction:'',
          content:''
        },
        rules: {
          title: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          category_id: [
            {required: true, message: '请选择文章类型', trigger: 'blur'}
          ],
          introduction: [
            {required: true, message: '请输入介绍', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}

          ]
        },
      }
    },
    mounted: function () {
    },
    methods: {



      save:function (formName) {
        var _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.postRequest("/post/list/add", _this.ruleForm).then(resp => {
              if (resp && resp.status == 200) {
                var data = resp.data;
                _this.$message({type: data.result, message: data.msg});
                _this.$router.push({path:'/post/list'});
              }
            })
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },

      handleAvatarSuccess(res, url) {
        this.ruleForm.cover_url = res.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/gif'
          || file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }


</script>
